<template>
  <a-layout hasSider class="container">
    <a-layout-sider theme='light' width="300px">
      <div style="backgroundColor:#f0f2f5;">
        <a-form-item label="服务选择" style="margin-bottom:0">
          <a-select style="width:100%" show-search :show-arrow="false" :filter-option="filterOption"
            @change="changeApiDocs" placeholder="请选择或搜索一个服务" v-model:value="apiDocUrl">
            <a-select-option v-for="s in specList" :key="s.name" :value="s.url">{{s.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <div style="height:10px"></div>
      </div>
      <a-input placeholder="请输入要搜索的模块名称" v-model:value="moduleName"></a-input>
      <div class="api-tag-list">
        <a-menu mode="inline" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" style="height: 100%">
          <a-menu-item :key="tag.name" v-for="(tag,index) in docsObjTags" @click="handleTag(tag.name)">
            <div :title="`${tag.name}-${tag.description}`">
              {{
            `${tag.name}-${tag.description}`
          }}
            </div>
          </a-menu-item>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout-content class="api-tag-list">
      <pathContent :urls="currentUrls" :definitions="docsObj.definitions" />
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { apiDocUrl } from "@/settings/local";
import { useSessionStorage } from "@vueuse/core";
import { computed, defineComponent, onMounted, ref, unref } from "vue";
import { getDocs, useSpecList } from "../../api/sw";
import { getPathsV2_0 } from "../../utils/swigger";
import pathContent from "./components/pathContent.vue";
import docsObj from "./hooks/docsObj";

function useUrlDocs() {
  const currentUrls = useSessionStorage("_current_urls", {});
  //切换路由
  function changeApiDocs(url: string) {
    if (!url) return;
    getDocs(url).then((res) => {
      console.log(res);
      Object.assign(unref(docsObj), res);
    });
  }

  function handleTag(tag: string) {
    currentUrls.value = getPathsV2_0(tag, unref(docsObj).paths);
  }

  onMounted(() => changeApiDocs(unref(apiDocUrl)));

  return { changeApiDocs, docsObj, handleTag, currentUrls };
}

export default defineComponent({
  components: {
    pathContent,
  },
  setup() {
    const moduleName = ref(""); //模块名称
    const { specList } = useSpecList();

    const { changeApiDocs, docsObj, handleTag, currentUrls } = useUrlDocs();

    const filterOption = (input: string, option: any) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    const docsObjTags = computed(() => {
      if (!unref(moduleName)) return unref(docsObj).tags;
      return unref(docsObj).tags.filter((tag: AnyObject) => {
        const { description, name } = tag;
        return (
          description.indexOf(unref(moduleName)) > -1 ||
          name.indexOf(unref(moduleName)) > -1
        );
      });
    });

    return {
      selectedKeys2: useSessionStorage("selectedKeys2", ["1"]),
      openKeys: ref<string[]>(["sub1"]),
      specList,
      apiDocUrl,
      changeApiDocs,
      docsObj,
      handleTag,
      currentUrls,
      filterOption,
      docsObjTags,
      moduleName,
    };
  },
});
</script>
<style lang="less" scoped>
.api-tag-list {
  height: calc(100vh - 124px);
  overflow: auto;
}
</style>